/* eslint-disable react/jsx-handler-names */
/* eslint-disable eqeqeq */
/**
 * 产品 业务组件 下拉列表结构
 * by zhangxinyue
 * create 2020-08-12
 * modify 2021-07-14 添加提示信息
 */
import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Select, Tooltip, Form } from 'antd';
import { FormItemLayout, NoLableLayout } from '../../form/formPub';

const { Option } = Select;

class ProductListC extends React.PureComponent {
  // props默认值
  static defaultProps = {
    title: '产品',
    placeholder: '请选择产品',
    helper: '',
    onChange: () => {},
    onDropdownVisibleChange: () => {},
    onRef: () => {}, // 本组件的引用
    width: '100%',
    rules: undefined, // 默认无校验规则
    formItemLayout: FormItemLayout, // 设置表单默认布局
    allowClear: true, // 默认可删除
    disabled: false, // 默认不禁用
    multiple: false, // 默认单选
    maxTagCount: 0, // 默认多选时，最多选择1条
    dataType: 1, // 默认数据源是组合根节点
    maatApi: false, // 默认什么环境下就用什么该环境的产品
    toolTipPlace: 'top', // tooltip显示位置
    exist: undefined, // 默认是获取存续期和到期的所有产品
    labalWrap: false,
    due: undefined, // 默认获取所有终止和非终止产品
    isQueryDetail: true, // dataType=2时是否查询产品详情 默认查询true
    currentTenant: 0, // 自定义租户查询产品， 为0时表示不传这个参数和以前一样用(为什么不是undefined？因为清除选中时是undefined)  为null/undefined表示初始化获取的产品为[]
    onGetProductListData: () => {}, // 抛出产品列表dataSource
    isExistence: false, // 查询存续产品
    initChangeFlag: false, // init时抛出onchange事件
  };

  constructor(props) {
    super(props);

    this.state = {
      fullProducts: undefined, // 产品全量数据
      dataSource: [],
      tooltipInfo: '', // 鼠标移动到组件，展示当前选中项全称
      selectValue: undefined,
      toolTipzIndex: undefined, // 选项tooltip 层级
    };
  }

  // fullProducts = [];  // 产品全量数据

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);

    // 调用接口，获取产品数据
    this.getProducts(
      { createdBy: localStorage.getItem('antd-pro-userId'), tradeModel: this.props.tradeModel },
      (e) => {
        this.setState(
          {
            dataSource: e,
          },
          () => {
            // 若有初始化值，则设置tooltip
            if (this.props.initialValue != undefined && this.props.initialValue != null) {
              this.setTooltip(this.props.initialValue);
              if (this.props.initChangeFlag) {
                // 首次加载的时候 抛出change事件
                this.onChange(this.props.initialValue, 'initChange');
              }
            }
          },
        );
      },
      this.props.currentTenant,
    );
  }

  componentDidUpdate(preProps, preState) {
    const { props } = this;
    const init = props.multiple ? (preProps.initialValue && preProps.initialValue.length > 0 ? JSON.stringify(preProps.initialValue) : '') : preProps.initialValue;
    const initN = props.multiple ? (props.initialValue && props.initialValue.length > 0 ? JSON.stringify(props.initialValue) : '') : props.initialValue;
    // 新旧对比
    if (init != initN) {
      // console.log('init的数据延迟处理');
      props.form.setFieldsValue({
        [props.dataIndex]: props.initialValue,
      });
      // 设置初始化的tooltip 延时的时候用
      this.setTooltip(props.initialValue);
      if (this.props.initChangeFlag) {
        // 首次加载的时候 抛出change事件
        // console.log(props.initialValue, 'initChange');
        this.onChange(props.initialValue, 'initChange');
      }
    }
    // 交易模式 did初始化拿不到，这里重新请求
    if (!preProps.tradeModel) {
      if (props.tradeModel != preProps.tradeModel) {
        // console.log('交易模式 重新请求');
        //   // 调用接口，获取产品数据
        this.getProducts(
          { createdBy: localStorage.getItem('antd-pro-userId'), tradeModel: props.tradeModel },
          (e) => {
            this.setState({
              dataSource: e,
            });
          },
          props.currentTenant,
        );
      }
    }
    // 扩展不同租户获取产品
    if (props.currentTenant !== preProps.currentTenant) {
      // console.log('不同租户的请求');
      this.getProducts(
        { createdBy: localStorage.getItem('antd-pro-userId'), tradeModel: props.tradeModel },
        (e) => {
          this.setState({
            dataSource: e,
          });
        },
        props.currentTenant,
      );
    }
  }

  // 设置tooltip
  setTooltip = (e, propT = this.props) => {
    if (this.state.fullProducts == undefined) {
      this.setState({
        tooltipInfo: '',
      });
      return;
    }
    const { multiple } = propT;
    let tooltipInfo = '';
    if (e != undefined && e != null) {
      if (Array.isArray(e) && multiple) {
        // 多选
        e.forEach((element, index) => {
          const find = this.state.fullProducts?.filter((item) => item.value == element);
          if (find && find.length > 0) {
            tooltipInfo += find[0].title;
          }
          // 最后一个元素之后不用换行filter
          if (index != e.length - 1) {
            tooltipInfo += '\r\n';
          }
        });
      } else {
        // 单选
        const find = this.state.fullProducts.filter((item) => e == item.value);
        if (find && find.length > 0) {
          tooltipInfo += find[0].title;
        }
      }
    }
    this.setState({
      tooltipInfo: tooltipInfo == '' ? '' : <div style={{ whiteSpace: 'pre' }}>{tooltipInfo}</div>,
    });
  };

  // 调用接口，获取产品树形结构
  getProducts = (query, callback, currentTenant) => {
    const payload = {
      ...query,
      verificationModeGZ: this.props.verificationModeGZ,
      dataType: this.props.dataType,
      maatApi: this.props.maatApi,
      exist: this.props.exist,
      due: this.props.due,
      tenant: currentTenant,
      menu: this.props.isExistence ? 'leverage' : undefined,
    };
    if (!payload.menu) delete payload.menu; // 默认不传，isExistence为true时传，查存续产
    if (!query.tradeModel) delete payload.tradeModel; // 组件不传tradeModel 则删除
    if (currentTenant === 0 || currentTenant === undefined) delete payload.tenant; // 组件不传currentTenant参数时候删除tenant
    this.props.dispatch({
      type: 'productAGroupM/getProducts',
      payload,
      callback: (e) => {
        // this.fullProducts = e;
        this.setState({
          fullProducts: e,
        });
        callback(e);
        // 如果组件接受了currentTenant 抛出查询到的产品
        if (payload.tenant) this.props.onGetProductListData(e ?? []);
      },
    });
  };

  // 非初始化状态下更改下拉选项(供父组件调用)
  setSelect = (value) => {
    const valueF = {};
    valueF[this.props.dataIndex] = value;
    this.props.form.setFieldsValue(valueF);

    // 触发产品切换事件
    this.onChange(value);
    // 修改tooltip
    this.setTooltip(value);
  };

  // 模糊搜索
  onSearch = (e) => {
    const { fullProducts } = this.state;
    const ds = fullProducts?.filter((item) => {
      return item.title.indexOf(e) > -1;
    });

    this.setState({
      dataSource: ds,
    });
  };

  // 展开下拉回调
  onDropdownVisibleChange = (open) => {
    if (open) {
      this.setState({
        // eslint-disable-next-line react/no-access-state-in-setstate
        dataSource: this.state.fullProducts == undefined ? [] : this.state.fullProducts,
      });
      // 隐藏tooltip
      this.setState({
        toolTipzIndex: -99999,
      });
    } else {
      setTimeout(() => {
        // 显示tooltip
        this.setState({
          toolTipzIndex: undefined,
        });
      }, 300);
    }
    const value = this.props.form.getFieldValue(this.props.dataIndex);
    // 当根据options隐藏显示刷新接口时，判断选择项是否变化，变化再抛出事件
    if (value && this.state.selectValue != value) {
      this.setState(
        {
          selectValue: value,
        },
        () => {
          this.props.onDropdownVisibleChange(open, this.props.form.getFieldValue(this.props.dataIndex));
        },
      );
    }
  };

  // 产品切换事件
  onChange = (e, changeType) => {
    // 多选模式
    if (this.props.multiple) {
      if (e && e.length) {
        let ds = [];
        e.forEach((element) => {
          const temp = this.state.fullProducts.filter((item) => {
            return item.value === element;
          });
          ds.push(temp && temp.length == 1 ? temp[0] : undefined);
        });
        // 对外抛出事件
        if (this.props.dataType == 2 && this.props.isQueryDetail) {
          // 产品节点
          this.props.dispatch({
            type: 'productAGroupM/getProductById',
            payload: { id: e.toString() },
            callback: (res) => {
              if (res && res != 'fail' && res.length > 0) {
                ds = ds?.map((x) => {
                  return {
                    ...res?.filter((r) => r.id == x.id)[0],
                    ...x,
                  };
                });
                this.props.onChange({ key: e, info: ds }, changeType);
              } else {
                this.props.onChange(undefined, changeType);
              }
            },
          });
        } else {
          // 组合根节点
          this.props.onChange({ key: e, info: ds }, changeType);
        }
      } else {
        // 对外抛出事件
        this.props.onChange(undefined, changeType);
      }
    } else {
      // 单选模式
      if (e == undefined) {
        this.setTooltip(e);
        this.props.onChange(undefined, changeType);
        return;
      }

      const ds = this.state.fullProducts?.filter((item) => {
        return item.value === e;
      });
      // 对外抛出事件
      if (this.props.dataType == 2 && this.props.isQueryDetail) {
        // 产品节点
        this.props.dispatch({
          type: 'productAGroupM/getProductById',
          payload: { id: e },
          // payload: { current: 1, pageSize: 999, params: { '@_INLIST_id': e } },
          callback: (res) => {
            if (res && res != 'fail' && res.length > 0) {
              this.props.onChange({ key: e, info: { ...res[0], ...ds[0] } }, changeType);
            } else {
              this.props.onChange(undefined, changeType);
            }
          },
        });
        // 组合根节点
      } else {
        this.props.onChange(ds && ds.length === 1 ? { key: e, info: ds[0] } : undefined, changeType);
      }
    }
    // 修改tooltip
    this.setTooltip(e);
  };

  render() {
    const {
      labalWrap,
      styleRow,
      form,
      title,
      dataIndex,
      initialValue,
      placeholder,
      helper,
      width,
      rules,
      formItemLayout,
      allowClear,
      disabled,
      multiple,
      maxTagCount,
      toolTipPlace,
      positionBody,
    } = this.props;
    return (
      <Tooltip zIndex={this.state.toolTipzIndex} title={this.state.tooltipInfo} placement={toolTipPlace}>
        <Form.Item
          name={dataIndex}
          initialValue={initialValue}
          rules={rules ? rules : []}
          colon={false}
          className={labalWrap ? 'labalWrap' : ''}
          labelCol={title ? formItemLayout.labelCol : NoLableLayout.labelCol}
          wrapperCol={title ? formItemLayout.wrapperCol : NoLableLayout.wrapperCol}
          label={
            title ? (
              helper ? (
                <span>
                  {title}&nbsp;
                  <Tooltip title={helper}>
                    <QuestionCircleOutlined />
                  </Tooltip>
                </span>
              ) : (
                <span>{title}</span>
              )
            ) : undefined
          }
        >
          <Select
            getPopupContainer={(triggerNode) => (!positionBody ? triggerNode.parentNode : document.body)}
            style={styleRow ? styleRow : { width }}
            placeholder={placeholder}
            onChange={this.onChange}
            allowClear={allowClear}
            filterOption={false}
            showSearch={true} // 使单选模式可搜索
            onSearch={this.onSearch} // 模糊搜索
            onDropdownVisibleChange={this.onDropdownVisibleChange}
            disabled={disabled}
            mode={multiple ? 'multiple' : undefined}
            maxTagCount={maxTagCount}
          >
            {this.state.fullProducts != undefined
              ? this.state.dataSource?.length > 0
                ? this.state.dataSource.map((item) => (
                    <Option value={item.value} key={item.value}>
                      {item.title}
                    </Option>
                  ))
                : [
                    <Option key={'blank'} value={'blank'} disabled={true}>
                      无匹配的结果
                    </Option>,
                  ]
              : [
                  <Option key={'blank'} value={'blank'} disabled={true}>
                    正在加载中...
                  </Option>,
                ]}
          </Select>
        </Form.Item>
      </Tooltip>
    );
  }
}

// props类型
ProductListC.propsTypes = {
  form: PropTypes.object, // form对象
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.string, // Form识别的Item ID
  initialValue: PropTypes.string, // 初始默认值
  placeholder: PropTypes.string, // 占位符
  onChange: PropTypes.func, // 输入框内容变化时的回调
  helper: PropTypes.oneOfType([
    // 提示帮助信息
    PropTypes.string,
    PropTypes.element,
  ]),
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  rules: PropTypes.object, // 校验规则
  formItemLayout: PropTypes.object, // 设置表单布局
  allowClear: PropTypes.bool, // 设置是否可删除
  disabled: PropTypes.bool, // 是否禁用
  multiple: PropTypes.bool, // 是否支持多选
  maxTagCount: PropTypes.number, // 多选时，做多显示多少条
  dataType: PropTypes.number, // 数据源：1-组合根节点  2-产品节点  3-产品节点，筛选出的是资产拆分/产品管理中未添加的产品 4- 投资经理真实权限产品 5- 投资经理真实权限产品加模拟产品
  maatApi: PropTypes.bool, // 正常情况下，在哪个环境下，就访问哪个环境的产品，
  // 但在投资建议书模块中，被引用到资管环境时，该组件的接口仍然要访问maat环境中的产品（而不是资管环境中产品），此时需要在接口前添加maat前缀
  exist: PropTypes.number, // 如果传参数1，获取存续产品，不包含过期产品，不传参获取存续产品和过期产品
  due: PropTypes.number, // 如果传参数1，获取的是非终止的产品，不传则包含终止、非终止的产品
  isQueryDetail: PropTypes.bool, // dataType=2时是否查询产品详情 默认查询true
  tradeModel: PropTypes.array, // 交易模式  BOOKKEEPING_MODE: "簿记模式"，  COMMAND_MODE: "指令模式"，VALUATION_BOOKKEEPING_MODEL: "估值系统对接模式"，VALUATION_TABLE_ANALYSIS_MODE: "估值表解析模式"
  verificationModeGZ: PropTypes.string, // 估值核对页面 需要的参数 传0  表示有估值的产品
  currentTenant: PropTypes.string, // 自定义租户获取产品
  onGetProductListData: PropTypes.func, // 抛出产品列表dataSource
  initChangeFlag: PropTypes.bool, // 初次是否抛出onchange事件 默认false (首次在非标工作台添加交易中使用)
};

export default connect(({ productAGroupM, loading }) => ({ productAGroupM, loading }))(ProductListC);
